<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="loogWrap"></div>
  </body>

  <script>
    function initLoop(id, data) {
      const wrap = document.getElementById(id)

      const leftBtn = '<div class="left-btn" id="leftBtn"></div>'
      const rightBtn = '<div class="left-btn" id="rightBtn"></div>'
      const tools = `<ul id="toolsBar">
        ${data.map((item) => `<li data-id="${item.id}"></li>`)}
      </ul>`
      const items = `<ul id="itemWrap">
        ${data.map(
          (item) => `<li data-id="${item.id}"><img src="${item.src}"/></li>`
        )}
      </ul>`
      wrap.appendChild(leftBtn)
      wrap.appendChild(rightBtn)
      wrap.appendChild(tools)
      wrap.appendChild(items)

      const lbtn = document.getElementById('leftBtn')
      const rbtn = document.getElementById('rightBtn')
      const toolbar = document.getElementById('toolsBar')
      const itemWrap = document.getElementById('itemWrap')
      lbtn.addEventListener('click', function (e) {})
      rbtn.addEventListener('click', function (e) {})
      rbtn.addEventListener('tools', function (e) {})
      rbtn.addEventListener('items', function (e) {})
    }

    const data = Array(5).fill({ id: 1, src: 'img' })

    initLoop(id, data)

    class loogEvent {
      constructor(selector, data) {
        this.$dom = document.querySelector(selector)
        this.data = data
        this.current = 0
        this.init()
      }

      init() {
        this.$dom.appendChild(this.takeBtn('left'))
        this.$dom.appendChild(this.takeBtn('right'))
        this.$dom.appendChild(this.takeTools())
        this.$dom.appendChild(this.takeItems())

        this.addEvent()
      }

      takeBtn() {}
      takeTools() {}
      takeItems() {}

      addEvent() {
        const childs = this.$dom.childNodes

        const leftBtn = childs.filter(
          (item) => (item.className = 'left-btn')
        )[0]
        const rightBtn = childs.filter(
          (item) => (item.className = 'right-btn')
        )[0]
        const tools = childs.filter((item) => (item.className = 'tools'))[0]
        const items = childs.filter((item) => (item.className = 'tools'))[0]

        leftBtn.addEventListener('click', this.change)
        rightBtn.addEventListener('click', this.change)
        tools.addEventListener('click', this.change)
        items.addEventListener('click', this.currentItem)
      }

      change(i) {
        switch (i) {
          case 'left':
            this.current -= 1
            break
          case 'right':
            this.current += 1
            break
          case typeof i === 'number':
            this.current = i
            break
          default:
            break
        }
      }

      currentItem() {}
    }

    const loop = new loogEvent('#wrap', [])
  </script>
</html>
